<template>
    <div>
      <div class="container">
        <div class="container-up">
          <el-breadcrumb separator="/">
          </el-breadcrumb>
        </div>
        <div class="container-middle">
          <div class="img-info">
            <img :src="course.courseImageUrl" alt="" />
          </div>
          <div class="detail-info">
            <div class="up">
              <div class="title">{{ course.name }}</div>
              <!-- <div class="share">
                分享：
                <img src="@/assets/images/wechat.svg" alt="" />
                <img src="@/assets/images/qq.svg" alt="" />
              </div> -->
            </div>
            <div class="middle">
              <div>
                {{ course.detail }}
              </div>
              <div>
                开课时间：&nbsp;{{ course.startTime }} - {{ course.endTime }}
                <span style="margin: 100px;">
              授课老师：{{ course.trainMan.name }}
            </span>
              </div>
              <div class="status">
                <div>
                  开课状态: &nbsp;
                  <b v-if="course.status === '1'">正在进行中</b>
                  <b v-else>已结束</b>
                </div>
              </div>
            </div>
            <div class="bottom" @click="subscribe">
              <p v-show="!isSubscribe">订阅课程</p>
              <p v-show="isSubscribe">已订阅</p>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>

  import {addUserCourse, listUserCourse, delUserCourse, updateUserCourse, getUserCourse, isSubScribe} from '@/business/api/user_course'

  export default {
    name: 'index',
    data: function() {
      return {
        course: null,
        isSubscribe: false,
        form: {
          courseId: null
        },
        queryParams: {
          courseId: null,
        }
      }
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        if (this.course == null) {
          this.course = this.$store.getters.courseInfo
        }
        if (this.course == null) {
          this.$router.go(-1)
        }
        // 查询当前是否已经订阅
        isSubScribe(this.course.id).then(response => {
          if (response.code === 200) {
            this.isSubscribe = response.data
          }
        })
      },
      subscribe() {
        // 绑定用户和课程的关系
        if (!this.isSubscribe) {
          this.form.courseId = this.course.id;
          addUserCourse(this.form).then(response => {
            if (response.code === 200) {
              this.$message.success('绑定成功')
            }
          })
        }else {
          this.$message.warning('不可重复订阅')
        }

      }
    }
  }
</script>

<style scoped>

  .content {
    margin: 0 auto;
    font-family: 'Microsoft YaHei', arial, sans-serif;
    color: #444444;
    line-height: 2 !important;
    padding: 30px;
  }
  .content img {
    width: 100%;
    display: block;
    border-radius: 4px;
  }

  .comment {
    margin: 10px;
    text-align: right;
  }

  .comment button {
    margin-top: 10px;
  }

  h1,
  h2,
  h3,
  h4 {
    color: #111111;
    font-weight: 400;
    margin-top: 1em;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    font-family: Georgia, Palatino, serif;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  p,
  dl {
    margin-bottom: 16px;
    padding: 0;
  }
  h1 {
    font-size: 48px;
    line-height: 54px;
  }
  h2 {
    font-size: 36px;
    line-height: 42px;
  }
  h1,
  h2 {
    border-bottom: 1px solid #efeaea;
    padding-bottom: 10px;
  }
  h3 {
    font-size: 24px;
    line-height: 30px;
  }
  h4 {
    font-size: 21px;
    line-height: 26px;
  }
  h5 {
    font-size: 18px;
    list-style: none;
  }

  code,
  pre {
    border-radius: 3px;
    background-color: #f7f7f7;
    color: inherit;
  }

  code {
    font-family: Consolas, Monaco, Andale Mono, monospace;
    margin: 0 2px;
  }

  pre {
    line-height: 1.7em;
    overflow: auto;
    padding: 6px 10px;
    border-left: 5px solid #6ce26c;
  }

  pre > code {
    border: 0;
    display: inline;
    max-width: initial;
    padding: 0;
    margin: 0;
    overflow: initial;
    line-height: inherit;
    font-size: 0.85em;
    white-space: pre;
    background: 0 0;
  }

  code {
    color: #666555;
  }

  table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;
  }
  table {
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    /*-webkit-box-shadow: 0 1px 1px #ccc;
      -moz-box-shadow: 0 1px 1px #ccc;
      box-shadow: 0 1px 1px #ccc;   */
  }
  table tr:hover {
    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
  }
  table td,
  .table th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;
  }

  table th {
    background-color: #dce9f9;
    background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#ebf3fc),
      to(#dce9f9)
    );
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: linear-gradient(to bottom, #ebf3fc, #dce9f9);
    /*-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
      -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
      box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;*/
    border-top: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    padding: 5px;
  }

  table td:first-child,
  table th:first-child {
    border-left: none;
  }

  table th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
  }
  table th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
  }
  table th:only-child {
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
  }
  table tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
  }
  table tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
  }
  aside {
    display: block;
    float: right;
    width: 390px;
  }
  blockquote {
    border-left: 0.5em solid #eee;
    padding: 0 0 0 2em;
    margin-left: 0;
  }
  blockquote cite {
    font-size: 14px;
    line-height: 20px;
    color: #bfbfbf;
  }
  blockquote cite:before {
    content: '\2014 \00A0';
  }

  blockquote p {
    color: #666;
  }
  hr {
    text-align: left;
    color: #999;
    height: 2px;
    padding: 0;
    margin: 16px 0;
    background-color: #e7e7e7;
    border: 0 none;
  }

  dl {
    padding: 0;
  }

  dl dt {
    padding: 10px 0;
    margin-top: 16px;
    font-size: 1em;
    font-style: italic;
    font-weight: bold;
  }

  dl dd {
    padding: 0 16px;
    margin-bottom: 16px;
  }

  dd {
    margin-left: 0;
  }
  .content {
    margin: 0 auto;
    font-family: 'Microsoft YaHei', arial, sans-serif;
    color: #444444;
    line-height: 1;
    padding: 30px;
  }
  p {
    margin: 16px 0 16px 0;
  }

  .container {
    padding: 10px 2%;
  }

  .container-up {
  }

  .container-middle {
    padding: 30px 0;
    display: flex;
    justify-content: center;
  }

  .detail-info {
    margin: 20px;
  }

  .container-middle > .detail-info > .up {
    display: flex;
    justify-content: space-between;
    height: 20%;
  }

  .container-middle > .detail-info > .up > .title {
    font-size: 35px;
    font-weight: bolder;
  }

  .container-middle > .detail-info > .up > .share {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 15px;
  }

  .container-middle > .detail-info > .up > .share > img {
    width: 20px;
    margin: 0 5px;
    cursor: pointer;
  }

  .container-middle > .detail-info > .middle {
    background-color: #f8f9fb;
    height: 50%;
    border-radius: 15px;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #767883;
  }

  .container-middle > .detail-info > .middle > div {
    margin: 5px 10px;
  }

  .container-middle > .detail-info > .middle .status {
    display: flex;
    justify-content: space-between;
  }

  .container-middle > .img-info {
    width: 100%;
    margin: 20px;
  }

  .container-middle > .img-info > img {
    border-radius: 10px;
    width: 300px;
    height: 300px;
    display: block;
    margin: 0 auto;
  }

  .container-middle > .detail-info > .bottom {
    margin: 20px 0;
    background-color: #e36c59;
    color: white;
    width: 200px;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    border-radius: 25px;

    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .container-bottom {
  }

  .el-breadcrumb {
    font-size: 20px;
  }

  .app-button {
  }
</style>
